init();

function init() {
	var game = {
		 playPanel : document.getElementById("play_panel"),
		 curr_dragged_obj : "",
		 target_obj : "",
		 imgSrc : "pic_1.jpg",
		 playPanelWidth : 450,
		 playPanelHeigh : 600,
		 lineElemNum:5,
		 btnStartGame:document.getElementById("startGame"),
		 canvas_list:[],
		 playPanelElemConfList:[],
		 backupPlayPanelElemConfList:[],
		 curr_play_step:0,
		 curr_play_time:0,
		 is_game_start:0,
		 one_sec_timer:"",
		 playStepTextElem:document.getElementById("play_step"),
		 playTimeTextElem:document.getElementById("play_time"),
		 isGameFinish:function(){
		 	var i = 0;
		 	for ( i = 0 ; i < this.playPanelElemConfList.length ; i++)
		 	{
		 		if ( this.playPanelElemConfList[i] != this.backupPlayPanelElemConfList[i])
		 			break;
		 	}

		 	if ( i >= this.playPanelElemConfList.length -1)
		 		return true;
		 	else
		 		return false;
		 },
		createImgeElement:function(){
			var i = 0;
			for ( i = 1 ; i < this.lineElemNum * this.lineElemNum +1 ;i++)
			{
				var c = document.createElement("canvas");
				var elemWidth = this.playPanelWidth/this.lineElemNum;
				var elemHeight = this.playPanelHeigh/this.lineElemNum;
				c.setAttribute("id","play_panel_box_"+i);
				c.setAttribute("width",elemWidth);
				c.setAttribute("height",elemHeight);

				this.playPanel.appendChild(c);	
			}
		},

		load_pic:function(){
	    	var img = new Image();
			img.src = this.imgSrc;

			img.onload = function () {
				var srcCanvas = document.getElementById("source_canvas");
				var cxt = srcCanvas.getContext("2d");
				cxt.drawImage(img,0,0,game.playPanelWidth,game.playPanelHeigh);
				game.initPlayPanel(srcCanvas);
				game.register_drag_event();
			};			
		},

		register_drag_event:function(){
			var i = 0;
			var playPanelElem = "";
			for ( i = 0 ; i < this.canvas_list.length ; i++)
			{
				playPanelElem = this.canvas_list[i];
				playPanelElem.setAttribute("draggable","true");
				
				playPanelElem.ondragstart = function(event){
					curr_dragged_obj = event.target;
				};

				playPanelElem.addEventListener("touchstart",playPanelElem.ondragstart,false);

				playPanelElem.ondragenter = function(event){
					event.target.style.outline="5px dotted yellow";
					target_obj = event.target;
				};

				playPanelElem.addEventListener("touchenter",playPanelElem.ondragenter,false);

				playPanelElem.ondragleave = function(event){
					event.target.style.outline="";
				};	

				playPanelElem.addEventListener("touchleave",playPanelElem.ondragleave,false);

				playPanelElem.ondragend = function(event){
					if ( curr_dragged_obj != "" && target_obj !="" && curr_dragged_obj != target_obj)
					{
							idx1 = target_obj.id.substring(15) - 1;
							idx2 = curr_dragged_obj.id.substring(15) - 1;
							game.swapImageElementByIdx(idx1,idx2);
							if ( idx1 != idx2)
								game.curr_play_step++;
							game.playStepTextElem.innerHTML="play_step:"+game.curr_play_step;
							if (game.isGameFinish())
							{
								game.is_game_start = 0;
								game.curr_play_step = 0;
								game.curr_play_time = 0;
								clearInterval(game.one_sec_timer);
								window.setTimeout(function(){
									confirm("successful!");
								}, 500);
							}
					}
					target_obj = "";
					curr_dragged_obj = "";
				};	
				playPanelElem.addEventListener("touchend",playPanelElem.ondragend,false);
			}
		},

		register_event:function(){
			this.register_drag_event();
		},

		resort_play_panel_element:function(){
			var i = 0;
			var totalElemNum = this.lineElemNum*this.lineElemNum;
			for ( i = 0 ; i < totalElemNum ; i++)
			{
				this.swapImageElementByIdx(i,Math.floor(totalElemNum * Math.random()));		
			}
		},

		game_on:function(){
		 	this.createImgeElement();
		 	this.load_pic();
		 	this.btnStartGame.onclick = function(){
				game.resort_play_panel_element();
				game.curr_play_time = 0;
				game.curr_play_step = 0;
				game.playStepTextElem.innerHTML="play_step:"+game.curr_play_step;
				game.playTimeTextElem.innerHTML = "play_time:"+game.curr_play_time + "s";

				game.one_sec_timer = setInterval(function(){
					game.curr_play_time += 1;	
					game.playTimeTextElem.innerHTML = "play_time:"+game.curr_play_time + "s";
				},1000);
				game.is_game_start = 1;
			};
		},

		swapImageElementByIdx:function(leftIdx,rightIdx){
			if ( leftIdx == rightIdx)
				return;
			var srcCanvas = document.getElementById("source_canvas");
			this.swapArrayElem(this.playPanelElemConfList,leftIdx,rightIdx);
			
			var leftWidth = this.playPanelElemConfList[leftIdx].width;
			var leftHeigh = this.playPanelElemConfList[leftIdx].height;

			var rightWidth = this.playPanelElemConfList[rightIdx].width;
			var rightHeigh = this.playPanelElemConfList[rightIdx].height;

			this.drawPlayPanelElem(srcCanvas,this.canvas_list[leftIdx].getContext("2d"),
				leftWidth,leftHeigh);	
			this.drawPlayPanelElem(srcCanvas,this.canvas_list[rightIdx].getContext("2d"),
				rightWidth,rightHeigh);
		},

		swapArrayElem:function(array,leftIdx,rightIdx){
			var tmp = array[leftIdx];
			array[leftIdx] = array[rightIdx];
			array[rightIdx] = tmp;
		},
		initPlayPanel:function(srcCanvas){
			var i = 1;
			var canvas;
			var cxt;
			var widthRatio = 1;
			var heightRatio = 1;
			var totalElemNum = this.lineElemNum * this.lineElemNum;

			for ( i = 1; i < totalElemNum +1 ;i++){
				canvas = document.getElementById("play_panel_box_"+i);
				cxt = canvas.getContext("2d");
				widthRatio = (i-1)%this.lineElemNum * (this.playPanelWidth/this.lineElemNum);
				heightRatio = Math.floor((i-1)/this.lineElemNum) * (this.playPanelHeigh/this.lineElemNum);
				
				this.drawPlayPanelElem(srcCanvas,cxt,widthRatio,heightRatio);
				this.playPanelElemConfList[i-1]={width:widthRatio,height:heightRatio};
				this.backupPlayPanelElemConfList[i-1] = this.playPanelElemConfList[i-1];
				this.canvas_list[i-1]=canvas;
			}			
		},
		
		drawPlayPanelElem:function(srcCanvas,cxt,width,height){
			var elemWidth = this.playPanelWidth/this.lineElemNum;
			var elemHeight = this.playPanelHeigh/this.lineElemNum;
			cxt.drawImage(srcCanvas,width,height,elemWidth,elemHeight,0,0,elemWidth,elemHeight);
		}

	};

	game.game_on();
}

//1.如何交换两个图片单元格
//2.图片拖动